/* eslint-disable no-useless-escape */
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const runtimeChunkName = 'runtime~manifest'
const productionGzip = process.env.npm_config_gzip
// const path = require('path')
const { publicPath } = require('./src/setting')
module.exports = {
  publicPath,
  // outputDir: path.resolve('../src/main/webapp/weizhan/entrance', `./${dir}`),
  devServer: {
    disableHostCheck: true
    // proxy: {
    //   '/api': {
    //     // target host 会将请求代理到此
    //     target: 'http://106.14.17.77:8070/mockjsdata/2/edwards/',
    //     // needed for virtual hosted sites
    //     changeOrigin: true,
    //     // proxy websockets
    //     ws: true
    //   }
    // }
  },
  // This is preferred over manually tapping into specific loaders using chainWebpack, because these options need to be applied in multiple locations where the corresponding loader is used.
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // @/ 是 src/ 的别名
        // 所以这里假设你有 `src/variables.scss` 这个文件
        prependData: `@import "@/assets/scss/_variables.scss";
        @import "@/assets/scss/_mixin.scss";`
      }
    }
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // devbuild
      config.devtool('none')
      // mutate config for production...
      config.optimization
        .runtimeChunk({
          name: runtimeChunkName
        })
        .splitChunks({
          cacheGroups: {
            vendors: {
              name: 'chunk-vendors',
              test: /[\\\/]node_modules[\\\/]/,
              priority: -10,
              chunks: 'initial'
            },
            common: {
              name: 'chunk-common',
              minChunks: 2,
              priority: -20,
              // all
              chunks: 'all',
              reuseExistingChunk: true
              // minSize: 30000
            }
          }
        })

      config
        .plugin('inlineManifest')
        .after('html')
        .use(HtmlWebpackInlineSourcePlugin)
        .end()
        .plugin('html')
        .tap(args => {
          args[0].title = 'BETAINFO'
          args[0].filename = 'index.html'
          args[0].productLog = true
          args[0].chunksSortMode = 'dependency'
          // Inline all files which names start with “runtime~” and end with “.js”.
          // That’s the default naming of runtime chunks
          /* see https://developers.google.com/web/fundamentals/performance/webpack/use-long-term-caching Inline webpack runtime to save an extra HTTP request */
          args[0].inlineSource = 'runtime~.+\\.js'
          return args
        })
      if (productionGzip) {
        config
          .plugin('compression')
          .use(CompressionWebpackPlugin)
          .tap(args => {
            const productionGzipExtensions = ['js', 'css']
            args[0] = {
              filename: '[path].gz[query]',
              algorithm: 'gzip',
              test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
              threshold: 10240,
              minRatio: 0.8
            }
            return args
          })
      }

      // 移除 runtime~manifest 的preload 但在modern模式下的legacy bundle时 此处的config.plugin('preload')会报错
      // https://github.com/vuejs/vue-cli/blob/53509e115fae1d99b52508a97ed6caa2c4e557e9/packages/%40vue/cli-service/lib/commands/build/index.js#L49
      // if (process.env.VUE_CLI_MODERN_BUILD) {
      // }
      config.plugin('preload').tap(args => {
        args[0].fileBlacklist.push(/runtime~.+\.js/)
        return args
      })
      // 移除 prefetch 插件
      config.plugins.delete('prefetch')
    } else {
      // mutate for development...
    }
  }
}
